<template>
    <div class="login-box">
        <div class="login-form soft-box">
            <h2 style="color: #a3a3a3;text-align: center;margin: 1rem 0">登录</h2>
            <v-form
                    ref="form"
                    v-model="valid"
                    lazy-validation
            >
                <v-text-field
                        v-model="email"
                        :rules="rules.email"
                        label="邮箱"
                        :counter="20"
                        type="email"
                        required
                ></v-text-field>

                <v-text-field
                        v-model="password"
                        label="密码"
                        type="password"
                        required
                ></v-text-field>
                <div class="control">
                    <v-btn
                            :loading="loginLoading"
                            :disabled="!valid"
                            color="success"
                            class="mr-4"
                            @click="validate"
                    >
                        登录
                    </v-btn>

                    <v-btn
                            color="error"
                            class="mr-4"
                            @click="reset"
                    >
                        重置
                    </v-btn>
                    <router-link to="/register">注册</router-link>
                </div>
            </v-form>
        </div>
    </div>

</template>

<script>
    import {login} from "../api/user";

    export default {
        name: "Login",
        data: () => ({
            valid: true,
            loginLoading: false,
            email: null,
            password: null,
            rules:{
                email: [v => !!v||'邮箱必须填写',v =>(v && v.length <= 20) || '邮箱最大只能输入20个',
                    v => (v && /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v)) || '邮箱校验失败'
                ],
                password: [v => !!v||'密码必须填写',v => (v && v.length <= 15) || '密码最大只能输入15个'],
            },
        }),

        methods: {
            validate() {
                if(this.$refs.form.validate()){
                    this.loginLoading = true;
                    login(this.email,this.password).then(res => {
                        if(res){
                            alert("登录成功");
                            this.$store.dispatch('getFolderData');
                            this.$store.commit("setUserData",res.user);
                            this.$router.push("/user");
                        }else {
                            alert("登录失败");
                        }
                        this.loginLoading = false;
                    }).catch(err => {
                        // let code = err.code;
                        console.log(err,"登录失败");
                        alert("账户无法登录");
                        this.loginLoading = false;
                    })
                }
            },
            reset() {
                this.$refs.form.reset()
            }
        },
    }
</script>

<style scoped lang="scss">
    .login-box {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

        .login-form {
            width: 90%;
            max-width: 30rem;
            height: auto;
        }
    }
</style>